<template>
	<view>
		<view class="order-item" @tap="goApp(orderItem)">
			<view class="top">
				<view class="img-box">
					<image class="image" :src="orderItem.itemImg" />
				</view>
				<view class="order-content">
					<view class="order-name">
						<image
							v-if="orderItem.source == 0"
							class="shop-logo"
							src="@/static/icons/taobao.png"
						/>
						<image
							v-else-if="orderItem.source == 1"
							class="shop-logo"
							src="@/static/icons/jd.png"
						/>
						<image
							v-else-if="orderItem.source == 2"
							class="shop-logo"
							src="@/static/icons/pdd.png"
						/>
						{{ orderItem.itemTitle }}
					</view>
					<view class="order-price">
						<view>订单编号：{{ orderItem.tradeId }}</view>
					</view>
					<view class="btn-flex">
						<view class="copy-btn" @tap.stop="copyTrade(orderItem.tradeId)">复制</view>
					</view>
					<view class="order-price">
						<view class="deal">
							<text>下单时间：{{ orderItem.orderCreateTime | dateFormatLine }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="goods-state">
				<view>
					<view class="goods-state-price" v-if="orderItem.status == 1"
						>已入账¥{{ orderItem.orderCommission }}</view
					>
					<view
						class="goods-state-price"
						style="color:#F70114"
						v-if="orderItem.status == 0"
						>入账中¥{{ orderItem.orderCommission }}</view
					>
					<view
						class="goods-state-price"
						style="color:#6A6363"
						v-if="orderItem.status == 2 && orderItem.orderStatus == 13"
					>
						已失效
					</view>
					<view
						class="amount-status"
						v-if="orderItem.status === 1 || orderItem.checkTime"
					>
						<text class="text" v-if="orderItem.status === 1">已结算到余额</text>
						<text class="text" v-else-if="orderItem.checkTime"
							>确认收货{{ checkTime }}天后结算到余额</text
						>
					</view>
				</view>
				<view class="goods-state__app" v-if="orderItem.orderStatus == 12">
					<text v-if="orderItem.source == 0">去淘宝确认收货</text>
					<text v-else-if="orderItem.source == 1">去京东确认收货</text>
					<text v-else-if="orderItem.source == 2">去拼多多确认收货</text>
					<text class="iconfont icon-xiayiye"></text>
				</view>
			</view>
			<loading-dig ref="loading-dig"></loading-dig>
			<!--授权弹窗-->
			<authorize ref="authorize"></authorize>
		</view>
	</view>
</template>

<script>
import moment from '@/utils/packges/moment';
const Alibcsdk = uni.requireNativePlugin('UZK-Alibcsdk');
const JDopen = uni.requireNativePlugin('UZK-JDopen');
import LoadingDig from '@/components/LoadingDig';
import Authorize from '@/components/Authorize';

export default {
	name: 'OrderItem',
	props: {
		orderItem: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	components: {
		LoadingDig
	},
	onReady() {
		JDopen.init(result => {
			this.showmsg(result.msg);
			console.log(JSON.stringify(result));
		});
	},
	computed: {
		checkTime() {
			let xTime=moment(this.orderItem.checkTime).diff(moment(this.orderItem.orderEarningTime), 'days') 
			return xTime;
		}
	},
	methods: {
		copyTrade(val) {
			uni.setClipboardData({
				data: String(val)
			});
		},
		goApp(e) {
			console.log(e);
			if (e.orderStatus == 12) {
				let orderId = Number(e.tradeId);
				if (e.source == 1) {
					// let path = `https://wqs.jd.com/order/n_detail_v2.shtml?deal_id=${orderId}`;
					// this.$refs['loading-dig'].open({ type: 1 }, done => {
					// 	JDopen.openurl(
					// 		{
					// 			url: path
					// 		},
					// 		result => {
					// 			if (!result.status) {
					// 				return this.$Router.push({
					// 					path: '/pages/special/jingdong',
					// 					query: {
					// 						url: res
					// 					}
					// 				});
					// 			}
					// 			done();
					// 		}
					// 	);
					// });

					if (plus.os.name == 'Android') {
						plus.runtime.launchApplication(
							{
								pname: 'com.jingdong.app.mall'
							},
							function(e) {
								console.log('Open system default browser failed: ' + e.message);
							}
						);
					} else if (plus.os.name == 'iOS') {
						plus.runtime.launchApplication({ action: 'openApp.jdMobile://' }, function(
							e
						) {
							console.log('Open system default browser failed: ' + e.message);
						});
					}
				} else if (e.source == 0) {
					// let path = `https://main.m.taobao.com/odetail/index.html?bizOrderId=${orderId}&archive=false&spm=a212db.index.dt_12.i0`;
					// this.$refs['loading-dig'].open({ type: 0 }, done => {
					// 	Alibcsdk.init(initResult => {
					// 		if (initResult.status) {
					// 			Alibcsdk.openurl(
					// 				{
					// 					url: path
					// 				},
					// 				result => {}
					// 			);
					// 		} else {
					// 			uni.showToast({
					// 				title: '初始化失败'
					// 			});
					// 		}
					// 		done();
					// 	});
					// });

					if (plus.os.name == 'Android') {
						plus.runtime.launchApplication(
							{
								pname: 'com.taobao.taobao'
							},
							function(e) {
								console.log('Open system default browser failed: ' + e.message);
							}
						);
					} else if (plus.os.name == 'iOS') {
						plus.runtime.launchApplication({ action: 'taobao://' }, function(e) {
							console.log('Open system default browser failed: ' + e.message);
						});
					}
				} else if (e.source == 2) {
					if (plus.os.name == 'Android') {
						plus.runtime.launchApplication(
							{
								pname: 'com.xunmeng.pinduoduo'
							},
							function(e) {
								console.log('Open system default browser failed: ' + e.message);
							}
						);
					} else if (plus.os.name == 'iOS') {
						plus.runtime.launchApplication({ action: 'pinduoduo://' }, function(e) {
							console.log('Open system default browser failed: ' + e.message);
						});
					}
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.order-item {
	background: #fff;
	padding: 20rpx;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	.top {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding-bottom: 16rpx;
		border-bottom: 1px solid #e8e8e8;
		.img-box {
			width: 198rpx;
			height: 198rpx;
			display: flex;
			margin-right: 20rpx;
			justify-content: center;
			align-items: center;
			float: left;
			.image {
				max-width: 100%;
				max-height: 100%;
			}
		}

		.order-content {
			width: 476rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.order-name {
				font-size: 28rpx;
				color: #000000;
				font-weight: 400;
				@include ellipsis(2);
				margin-bottom: 8rpx;
				.shop-logo {
					height: 36rpx;
					width: 36rpx;
					position: relative;
					top: 8rpx;
					right: 2rpx;
				}
			}

			.order-price {
				color: #717076;
				font-size: 24rpx;
				display: flex;
				align-items: center;
			}
			.btn-flex {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin: 7rpx 0;
				.copy-btn {
					width: 68rpx;
					height: 34rpx;
					text-align: center;
					line-height: 34rpx;
					border-radius: 18rpx;
					border: 1px solid #717076;
					color: #717076;
					font-size: 22rpx;
				}
			}
		}
	}

	.goods-state {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		font-size: 14px;

		.goods-state-price {
			color: #4b4000;
			font-size: 28rpx;
		}

		.goods-state-detail {
			color: #717076;
			display: flex;
			align-items: center;

			.icon {
				position: relative;
				top: -1.5rpx;
			}
		}

		.amount-status {
			color: #717076;
			font-size: 20rpx;
		}
		.goods-state__app {
			color: #f70114;
			font-size: 24rpx;
			.iconfont {
				font-size: 23rpx;
			}
		}
	}
}
</style>
